<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="false">
			<template #add>
				<div class="opt-item">
					<el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">添加人脸开关</el-button>
				</div>
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="switchData" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="switch_title" label="开关名称"></el-table-column>
				<el-table-column prop="version" label="版本"></el-table-column>
				<el-table-column prop="switch_value" label="开关值">
					<template #default="scope">
						<span>{{scope.row.switch_value == "1" ? "开启" : "关闭" }}</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200">
					<template #default="scope">
						<el-button @click="editSwitchData(scope.row)" type="success" plain size="mini">编辑</el-button>
						<el-button @click="showSwitchData(scope.row)" type="danger" plain size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component :page="page" :size="size" :total="total" @getChildCurrent="getCurrent"
			@getChildLimit="getLimit"></page-component>

		<!-- 添加人脸开关 -->
		<compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
			<el-form ref="form" :model="form" label-width="120px">
				<el-scrollbar height="80vh" v-loading="formLoading" element-loading-text="正在进行请求,请稍后"
					element-loading-spinner="el-icon-loading">
					<div class="form-flex">
						<el-form-item label="开关名称" prop="switch_name">
							<el-input class="w-ipt" v-model="form.switch_name" placeholder="请输入开关名称">
							</el-input>
						</el-form-item>
						<el-form-item label="开关标题" prop="switch_title">
							<el-input class="w-ipt" v-model="form.switch_title" placeholder="请输入开关标题">
							</el-input>
						</el-form-item>
						<el-form-item label="所属应用" prop="app_name">
							<el-input class="w-ipt" v-model="form.app_name" placeholder="请输入所属应用">
							</el-input>
						</el-form-item>
						<el-form-item label="应用版本" prop="version">
							<el-input class="w-ipt" v-model="form.version" placeholder="请输入应用版本"></el-input>
						</el-form-item>
						<el-form-item label="是否启用" prop="switch_value">
							<el-radio-group v-model="form.switch_value">
								<el-radio-button label="1">开启</el-radio-button>
								<el-radio-button label="2">关闭</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</div>
				</el-scrollbar>
				<submit-reset @getChildNewForm="getNewForm" @getChildResetForm="getResetForm('form')">
				</submit-reset>
			</el-form>
		</compoment-drawer>
		
		<!-- 删除数据确认 -->
		<delete-data :del_data_dialog="del_data_dialog" @getDelData="getDelData">
			<el-descriptions class="margin-top" :column="1" :size="medium" border>
				<el-descriptions-item>
					<template #label>
						id
					</template>
					{{delSwitchData.id}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						开关名称
					</template>
					{{delSwitchData.switch_name}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						开关标题
					</template>
					{{delSwitchData.switch_title}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						所属应用
					</template>
					{{delSwitchData.app_name}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						应用版本
					</template>
					{{delSwitchData.version}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						启用状态
					</template>
					{{delSwitchData.state == "1" ? "启用" : "停用"}}
				</el-descriptions-item>
			</el-descriptions>
		</delete-data>
	</div>

</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'

	export default {
		name: 'switch',
		mixins: [mixin],
		data() {
			return {
				switchData: [],
				confirmSwitchData: false,
				delSwitchData: {}, // 删除的数据

				// 表单
				drawer_name: '添加人脸开关',
				form: {
					switch_name: '人脸开关',
					switch_title: '',
					switch_value: 1,
					app_name: '',
					version: ''
				}
			}
		},
		mounted() {
			this.getSwitch();
		},
		methods: {
			getSwitch() {
				let self = this;
				self.loading = true;
				API.faceSwitches(1, 10).then(res => {
					self.loading = false;
					let data = res.data.data;
					self.switchData = data.data;
					self.total = data.total;
					self.current = 1;
				}).catch(err => {
					self.loading = false;
					self.$message.error(err.response.data.message)
				})
			},
			getCurrent(data) {
				let self = this;
				self.loading = true;
				API.faceSwitches(data.child_current, self.size).then(res => {
					let data = res.data.data;
					self.loading = false;
					self.switchData = data.data;
					self.total = data.total;
				}).catch(err => {
					self.loading = false;
					self.$message.error(err.response.data.message)
				});
			},
			getLimit(data) {
				let self = this;
				self.loading = true;
				API.faceSwitches(self.page, data.child_limit).then(res => {
					let data = res.data.data;
					self.loading = false;
					self.switchData = data.data;
					self.total = data.total;
				}).catch(err => {
					self.loading = false;
					self.$message.error(err.response.data.message)
				});
			},
			// 编辑数据
			editSwitchData(row) {
				let self = this;
				self.switchForm = true;
				self.form = {
					id: row.id,
					switch_name: row.switch_name,
					switch_title: row.switch_title,
					switch_value: row.switch_value,
					app_name: row.app_name,
					version: row.version
				}
			},
			// 查看删除数据
			showSwitchData(row) {
				let self = this;
				self.delData();
				self.delSwitchData = row;
			},
			// 确定删除数据
			getDelData() {
				let self = this;
				self.confirmSwitchData = false;
				// API.delAip(self.delSwitchData.id).then(res => {
				// 	console.log(res)
				// 	self.getSwitch();
				// 	self.$message.success("删除成功");
				// 	self.confirmSwitchData = false;
				// }).catch(err => {
				// 	self.$message.error(err.response.data.message)
				// })
			},
			// 提交表单
			getNewForm() {
				let self = this;
				self.formLoading = true;
				// API.aip(self.form).then(res => {
				// 	console.log(res)
				// 	self.submitSuccess();
				// 	self.drawer_form = false;
				// 	self.formLoading = false;
				// 	self.initForm();
				// 	self.getAip();
				// }).catch(err => {
				// 	self.formLoading = false;
				// 	self.$message.error(err.response.data.message);
				// });
			},
			// 关闭表单填写
			getdrawer_form(data) {
				let self = this;
				self.drawer_form = data.child_drawer_form;
				self.initForm();
			},
			// 重置表单填写
			getResetForm(formName) {
				let self = this;
				self.$refs[formName].resetFields();
				self.initForm();
			},
			// 初始表单
			initForm() {
				let self = this;
				self.form = {
					switch_name: '人脸开关',
					switch_title: '',
					switch_value: 1,
					app_name: '',
					version: ''
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.m-top {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 8px;
		background-color: #f0f0f0;

		.m-box {
			margin-right: 10px;
		}
	}

	.table-box {
		margin: 10px 0;
	}

	.m-pagination {
		padding: 20px 0;
		text-align: center;
	}

	.m-form {
		margin: 20px;
	}

	.u-drawer-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		font-size: 24px;
	}
</style>
